
<template>
    <div id="editor" :style="getPageStyle()" ref="editorRef" @click.stop="" @mousedown="editorClick">
        <!--  -->
        <Shape :defaultStyle="item.style" :scale="cardStore.editor.scale" :style="getShapeStyle(item.style)"
            :active="cardStore.comControls.includes(item._id)" v-for="(item, index) in cardStore.cards" :key="index"
            @rightClick="rightClick($event, item)" @selectCom="selectCom(item)">
            <!-- <component :is="item.component" /> -->
            <component :is="item.component" :initProp="item.cardJson.initProp" :comData="item.comData" />
        </Shape>
        <div class="tips" :style="{ transform: 'scale(' + (1 / cardStore.editor.scale) + ')' }">
            <span>触摸板双指可拖拽缩放</span>
            <span>
                {{ cardStore.editor.width }} x {{ cardStore.editor.height }}
            </span>
            <span>
                {{ parseInt(cardStore.editor.scale * 100) }}%
            </span>
        </div>
    </div>

    <!-- 工具 -->
    <editorTool @reset="resetDragPos" @scaleChange="scaleChange"></editorTool>

    <!-- 缩放遮罩层 -->
    <div class="scale_mask" :class="[showScaleTips ? 'active' : 'unactive']">
        {{ scaleTips }}
    </div>
</template>
<script setup>
import {
    onBeforeUnmount,
    onMounted,
    nextTick,
    ref,
    computed
} from 'vue'
import Shape from "./Shape/Shape.vue"
import editorTool from './editor_tool.vue'
import { fillStyle } from "../../utils/utils"
import { userCardStore } from '../../store/userCardStore'
import { useLoogPress } from '../../hooks/useLoogPress'
import { useTouchDragScale } from '../../hooks/useTouchDragScale'
import {
    useContextMenu
} from '../../hooks/ContextMenu/useContextMenu'
const contextMenu = useContextMenu()
const cardStore = userCardStore()
const loogPress = useLoogPress()

const showScaleTips = ref(false)
const scaleTips = computed(() => {
    return parseInt(cardStore.editor.scale * 100) + '%'
})
const editorRef = ref(null)




let touchDrag = null
cardStore.editorTransformChange = (tag) => {
    tag === 'touch' && touchDrag && touchDrag.reset()
}
const resetDragPos = (pos) => {
    editorRef.value.classList.add('animate')
    cardStore.setEditorTransform(pos, 'touch')
    setTimeout(() => {
        editorRef.value.classList.remove('animate')
    }, 500);
}
const scaleChange = () => {
    touchDrag && touchDrag.reset()
}
onMounted(async () => {
    await nextTick()
    // useTouchDragScale(touchRef.value, editorRef.value)
    const ele = document.getElementsByClassName('editor-container')[0]
    let timer
    touchDrag = useTouchDragScale(ele, {
        scaleChange() {
            showScaleTips.value = true
            timer && clearTimeout(timer)
            timer = setTimeout(() => {
                showScaleTips.value = false
            }, 500);
        }
    })
})

// 编辑器快捷键---start
let cacheCard = null
const keydown = e => {
    // if (e.ctrlKey && e.code === 'KeyC') {
    //     cacheCard = cardStore.curComponet
    // }
    // if (e.ctrlKey && e.code === 'KeyV') {
    //     console.log("Ctrl + V被按下");
    //     cacheCard && cardStore.copy(cacheCard)
    // }
    switch (e.keyCode) {
        case 46: cardStore.removeCom()
    }
}

window.document.addEventListener("keydown", keydown)
onBeforeUnmount(() => {
    window.document.removeEventListener("keydown", keydown)
})
// 编辑器快捷键---end

// 监听ctrl事件---start
const getLoogKey = loogPress.press(17)
onBeforeUnmount(() => {
    loogPress.clear(17)
})
// 监听ctrl事件---end

// 右键菜单---start
const rightClick = (e, card) => {
    let menuList = [
        {
            btnName: '复制',
            icon: '#copy',
            event() {
                console.log('上一级')
                cardStore.copy(card)
            }
        },
        {
            btnName: '移至上一级',
            icon: '#move-up',
            event() {
                console.log('上一级')
                cardStore.changePrev(card)
            }
        },
        {
            btnName: '移至下一级',
            icon: '#move-down',
            event() {
                console.log('下一级')
                cardStore.changeNext(card)
            }
        },
        {
            btnName: '删除',
            icon: '#del',
            event() {
                cardStore.removeCom(card)
            }
        }
    ]
    card.group && menuList.push({
        btnName: '解散组',
        icon: '#file',
        event() {
            cardStore.removeGroup(card)
        }
    })
    if (getLoogKey(17) && cardStore.comControls.length > 1) {
        menuList = [
            {
                btnName: '成组',
                icon: '#file',
                event() {
                    console.log('成组')
                    cardStore.addGroup()
                }
            },
        ]
    }
    contextMenu.showMenu(e, {
        menuList
    })
}
// 右键菜单---end

const getShapeStyle = (style) => {
    return fillStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
}
// 设置编辑器信息
const getPageStyle = () => {
    const { width, height, backgroundColor, left, top, scale } = cardStore.editor
    return `
        width:${width}px;
        height:${height}px;
        background-color: ${backgroundColor};
        transform: translate(${left}px, ${top}px) scale(${scale});
        `
}



// 设置当前选中
const selectCom = (card) => {
    if (!getLoogKey(17)) {
        cardStore.clearControl()
    }
    cardStore.curComponet = card
    cardStore.comControl(card, true)
}

const editorClick = () => {
    cardStore.curComponet = null
    cardStore.clearControl()
}

onMounted(() => {
    const view = document.querySelector('.editor-container')
    view.onclick = editorClick
})

</script>
  
<style scoped lang="less">
#editor {
    position: relative;
    // overflow: hidden;
}

.animate {
    transition: transform .3s;
}

.tips {
    position: absolute;
    bottom: -26px;
    right: 0;
    transform-origin: 100% 0;
    font-size: 14px;

    span {
        padding-left: 8px;
    }
}

.scale_mask {
    position: fixed;
    top: 50%;
    left: 50%;
    font-size: 50px;
    margin-left: -100px;
    margin-top: -100px;
    visibility: hidden;

    &.active {
        animation: twinkle 0.3s ease-in-out;
        visibility: visible;
    }

    &.unactive {
        transition: visibility .3s;
        visibility: hidden;
        animation: twinkle_out 0.3s ease-in-out;
    }
}
</style>
  